<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search-column class="fixed-column">
            <page-search-item>
                <el-input
                    v-model="groupName"
                    placeholder="请输入组名"
                    clearable
                ></el-input>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button icon="el-icon-plus" @click="dialogFormVisible = true"
                    >添加队(组)</el-button
                >
            </page-search-item>
        </page-search-column>
        <el-table
            v-if="tableData.length > 0"
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            style="width: 100%"
            row-key="id"
            height="680"
        >
            <el-table-column
                type="index"
                label="序号"
                width="60"
            ></el-table-column>
            <el-table-column prop="name" label="组名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="leader" label="组长" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="telephone"
                label="联系电话"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="wechat" label="微信号" show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column
                prop="villageName"
                label="所属村"
                show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
                prop="houseCount"
                label="户数"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="population"
                label="人口数"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click="handleEdit(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text v-else style="min-height: 400px;"> </ask-empty-text>
        <template v-slot:footer v-if="tableData.length > 0">
            <pagination
                :total="total"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>

        <el-dialog
            title="添加组(队)"
            :visible.sync="dialogFormVisible"
            width="20%"
            @close="closeDialogForm('dialogForm')"
        >
            <el-form
                :model="dialogForm"
                :rules="dialogFormRules"
                label-position="right"
                label-width="80px"
                ref="dialogForm"
            >
                <el-form-item label="组名" prop="name">
                    <el-input
                        v-model="dialogForm.name"
                        placeholder="请输入组名"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="组长" prop="leader">
                    <el-input
                        v-model="dialogForm.leader"
                        placeholder="请输入组长"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="telephone">
                    <el-input
                        v-model="dialogForm.telephone"
                        placeholder="请输入联系电话"
                    ></el-input>
                </el-form-item>
                <el-form-item label="微信号">
                    <el-input
                        v-model="dialogForm.wechat"
                        placeholder="请输入微信号"
                        maxlength="20"
                    ></el-input>
                </el-form-item>
                <el-form-item label="户数" prop="houseCount">
                    <el-input
                        v-model.number="dialogForm.houseCount"
                        placeholder="请输入户数"
                        maxlength="8"
                    ></el-input>
                </el-form-item>
                <el-form-item label="人口数" prop="population">
                    <el-input
                        v-model.number="dialogForm.population"
                        placeholder="请输入人口数"
                        maxlength="8"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleRest('dialogForm')">取 消</el-button>
                <el-button type="primary" @click="submitForm('dialogForm')"
                    >提交</el-button
                >
            </div>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
const validateTel = (rule: any, value: any, callback: any) => {
    if (value === "") {
        return callback(new Error("联系方式不能为空"));
    } else {
        const isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        const isMob = /^((\+?86)|(\+86))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
        if (isPhone.test(value) || isMob.test(value)) {
            callback();
        } else {
            return callback(new Error("请输入正确的联系方式"));
        }
    }
};

const validateNum = (rule: any, value: any, callback: any) => {
    if (value === "") {
        return callback(new Error("不能为空"));
    } else {
        if (isNaN(value)) {
            return callback(new Error("请输入数字类型"));
        } else {
            if (value >= 0) {
                callback();
            } else {
                return callback(new Error("值不能小于0"));
            }
        }
    }
};
@Component({
    name: "SystemGroupMange"
})
export default class SystemGroupMange extends Vue {
    // 搜索的组名
    groupName = "";
    dialogFormVisible = false;
    // 表格数据
    tableData: any[] = [];
    // 表单数据
    dialogForm = {
        name: "",
        leader: "",
        telephone: "",
        wechat: "",
        houseCount: "",
        population: ""
    };

    //  操作类型 是编辑还是新增
    handleTypeId = "";

    // 表单验证规则
    dialogFormRules = {
        name: [{ required: true, message: "请输入组名" }],
        leader: [{ required: true, message: "请输入组长名" }],
        telephone: [{ required: true, validator: validateTel }],
        houseCount: [{ required: true, validator: validateNum }],
        population: [{ required: true, validator: validateNum }]
    };

    // 分页器数据
    currentPage = 1;
    pageSize = 10;
    total = 0;

    handleEdit(row: any) {
        this.handleTypeId = row.id;
        this.dialogForm = {
            name: row.name,
            leader: row.leader,
            telephone: row.telephone,
            wechat: row.wechat,
            houseCount: row.houseCount,
            population: row.population
        };
        this.dialogFormVisible = true;
    }

    // 删除
    handleDelete(row: any) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["group/delete"]({
                    data: {
                        id: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("删除成功");
                    this.getTableData({
                        currentPage: 1,
                        pageSize: 10
                    });
                    this.currentPage = 1;
                    this.pageSize = 10;
                }
            })
            .catch(() => {
                this.$message({ type: "info", message: "已取消删除" });
            });
    }

    created() {
        this.getTableData({
            currentPage: this.currentPage,
            pageSize: this.pageSize
        });
    }

    // 当操作分页器
    getTable(val: any) {
        const data = {
            currentPage: val.page,
            pageSize: val.limit,
            name: this.groupName
        };
        this.getTableData(data);
    }

    // 搜索组
    handleSearch() {
        this.getTableData({
            currentPage: 1,
            pageSize: 10,
            name: this.groupName
        });
    }

    // 获取对组信息
    async getTableData(data: any) {
        const res = await this.$server["group/queryList"]({
            data: data
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        }
    }

    //  提交表单
    submitForm(formName: any) {
        (this.$refs[formName] as any).validate(async(valid: any) => {
            if (valid) {
                const res = await this.$server["group/mange"]({
                    data: {
                        id: this.handleTypeId,
                        name: this.dialogForm.name,
                        leader: this.dialogForm.leader,
                        telephone: this.dialogForm.telephone,
                        wechat: this.dialogForm.wechat,
                        houseCount: this.dialogForm.houseCount,
                        population: this.dialogForm.population
                    }
                });
                if (res.data.code === 200) {
                    this.dialogFormVisible = false;
                    this.dialogForm.name = "";
                    this.dialogForm.wechat = "";
                    this.handleTypeId = "";
                    this.$message.success(res.data.message);
                    (this.$refs[formName] as any).resetFields();
                    this.getTableData({
                        currentPage: 1,
                        pageSize: 10
                    });
                }
            } else {
                return false;
            }
        });
    }

    // 重置表单 并关闭弹窗
    handleRest(formName: any) {
        this.dialogFormVisible = false;
        (this.$refs[formName] as any).resetFields();
        this.dialogForm.name = "";
        this.dialogForm.wechat = "";
        this.handleTypeId = "";
    }

    closeDialogForm(formName: any) {
        (this.$refs[formName] as any).resetFields();
        this.dialogForm.name = "";
        this.dialogForm.wechat = "";
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: auto !important;
        background: transparent !important;
        .pbb__search-column.fixed-column {
            padding: 6px 10px !important;
        }
        .pbb__search-group {
            display: flex;
            align-items: center;
            .el-input {
                margin-right: 10px;
            }
        }
    }
}

.el-dialog__wrapper {
    ::v-deep {
        .el-dialog__body {
            padding: 10px 20px;
            border-top: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
        }
    }
}
</style>
